<template>
  <v-container>
    <v-row>
      <v-col cols="8">
        <v-sheet>
          <v-btn @click="click">点我呀</v-btn>
        </v-sheet>
        <v-sheet>
          <v-text-field @keydown="keydown" @keyup="keyup"></v-text-field>
        </v-sheet>
      </v-col>
      <v-col cols="4">
        <v-sheet color="blue-lighten-3" class="pa-4 rounded-lg" style="min-height: 80vh" :elevation="4">
          <pre class="font-weight-medium" v-html="dataComputed"></pre>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue'

const data = reactive<{
  [key: string]: {
    value?: string
    screenX?: number
    keyCode?: number
    screenY?: number
    key?: string
    code?: string
    altKey: boolean
    ctrlKey: boolean
  }
}>({})

const dataComputed = computed(() => {
  return JSON.stringify(data, null, 4)
})
const click = (event: MouseEvent) => {
  console.log(event)
  data['click'] = {
    screenX: event.screenX,
    screenY: event.screenY,
    altKey: event.altKey,
    ctrlKey: event.ctrlKey
  }
}
const keydown = (event: KeyboardEvent) => {
  console.log(event)
  data['keydown'] = {
    altKey: event.altKey,
    ctrlKey: event.ctrlKey,
    key: event.key,
    code: event.code,
    value: (event.target as HTMLFormElement).value
  }
}
const keyup = (event: KeyboardEvent) => {
  console.log(event)
  data['keyup'] = {
    altKey: event.altKey,
    ctrlKey: event.ctrlKey,
    key: event.key,
    code: event.code,
    value: (event.target as HTMLFormElement).value
  }
}
</script>
<style scoped></style>
